"Folder Library concept"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Folder Library concept</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="logo">ORGANIZATION</div>
<ul>
<li><i class="fa fa-question-circle-o fa-lg"></i> Help</li>
<li class="active"><i class="fa fa-tachometer fa-lg"></i> Dashboard</li>
<li><i class="fa fa-user fa-lg"></i> My Profile</li>
</ul>
</header>
<section id="wrapper">
<nav>
<ul>
<li class="active tooltiper" data-tooltip="My documents"><i class="fa fa-folder-open-o" aria-hidden="true"></i></li>
<li class="tooltiper disabled" data-tooltip="Available soon"><i class="fa fa-times" aria-hidden="true"></i></li>
<li class="tooltiper disabled" data-tooltip="Available soon"><i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
</nav>
<div class="main">
<h1>My documents</h1>
<div class="input-wrap"><input id="searchbar" type="search" placeholder="Search a file..." /><i class="fa fa-search" aria-hidden="true"></i></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,700);header,nav ul,nav ul li{width:100%}
.input-wrap i,header .logo{transform:translateY(-50%)}
#searchbar,body,h1,h2,h3{font-family:Montserrat,sans-serif}
*{margin:0;padding:0;outline:0;list-style:none;text-decoration:none;box-sizing:border-box;color:#111;background:0 0;border:none}
#searchbar,.right{border-radius:8px}
body{background:url(http://www.thomaspodgro.com/pen/hero-bg.jpg) top left no-repeat;background-size:cover;font-weight:400;min-height:100vh}
#wrapper{padding:100px 100px 50px 50px}
h1,h2,h3{font-weight:300}
header .logo,header ul li{display:inline-block;font-weight:700}
header{position:fixed;top:0;left:0;background:#fff;height:100px;line-height:100px;padding:0 100px;z-index:999}
header .logo{float:left;font-size:20px;color:#fff;background:#f95536;line-height:initial;position:relative;top:50%;padding:10px}
header ul{float:right;display:inline-block}
header ul li{float:left;text-transform:uppercase;font-size:14px;color:#333;margin-left:40px;letter-spacing:1px}
.folder p,h1{font-weight:300}
header ul li.active{color:#f95536}
nav{position:fixed;top:100px;left:0;height:calc(100vh - 100px);width:100px;z-index:3;background:rgba(0,0,0,.7)}
.input-wrap,.left,.right,nav ul{position:relative}
nav ul li{height:120px;border-bottom:1px solid rgba(255,255,255,.3);text-align:center;line-height:120px;cursor:pointer}
nav ul li.active{border-bottom:none;background:#f95536}
nav ul li.disabled:hover{background:rgba(0,0,0,.2);cursor:not-allowed}
nav ul li i.fa{color:#fff;font-size:30px}
#searchbar,.input-wrap i{background:#fff;color:#333}
.main{width:60%;float:left;margin-left:100px;margin-top:50px}
.left{margin-top:30px}
.right{width:25%;float:right;background:#fff;padding:30px;height:70vh;min-height:500px;margin-top:50px;margin-bottom:10vh}
.left:after,.right:after{content:"";display:table;clear:both}
h1{font-size:50px;margin-bottom:30px}
.input-wrap i{position:absolute;right:40px;top:50%}
.folder,.item{margin-right:10px;position:relative}
#searchbar{display:block;width:100%;padding:20px 40px;font-size:18px}
#searchbar::-webkit-input-placeholder{color:#b9b9b9}
#searchbar::-moz-placeholder{color:#b9b9b9}
#searchbar:-ms-input-placeholder{color:#b9b9b9}
#searchbar:-moz-placeholder{color:#b9b9b9}
.item{cursor:-webkit-grab;margin-bottom:20px;padding:0 0 20px 20px;display:block;border-bottom:1px solid #ccc;background:rgba(255,255,255,.3);transition:.3s width ease-out,.3s height ease-out}
.item i{margin-right:10px}
.item i,.item p{display:inline-block;vertical-align:middle}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
var fileSelect = document.getElementById("fileSelect"),
draggableFile = document.getElementById("draggableFile"),
result = document.getElementById("result"),
wrapper = document.getElementById("wrapper");
xhr = new XMLHttpRequest();
if (window.File && window.FileList && window.FileReader) {
function setupReader(file, handler) {
var reader = new FileReader();
reader.onloadend = handler;
reader.readAsDataURL(file);
}
function overFile(e) {
e.stopPropagation();
e.preventDefault();
wrapper.className = "visible";
}
function endFile(e) {
e.stopPropagation();
e.preventDefault();
wrapper.className = "";
}
function dropFile(e) {
e.stopPropagation();
e.preventDefault();
var files = e.target.files || e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var eachFile = files[i],
type = eachFile.type == "" || eachFile.type == null
? eachFile.name.split(".")[1]
: eachFile.type;
setupReader(eachFile, function(e) {
$("#result").append('<div class="item"><i class="fa fa-file-o" aria-hidden="true"></i><p>'+eachFile.name +'</p></div>');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit
Tumblr cards redesign concept

Questions / Comments: